import React, { useEffect, useState } from 'react';
import { Layout, Menu } from 'antd';
import './index.css';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { UserOutlined } from '@ant-design/icons';
import API from '../../util/api';
const { Sider } = Layout;
const { SubMenu } = Menu
const iconList = {
  "/home":<UserOutlined />,
  "/user-manage":<UserOutlined />,
  "/user-manage/list":<UserOutlined />,
  "/right-manage":<UserOutlined />,
  "/right-manage/role/list":<UserOutlined />,
  "/right-manage/right/list":<UserOutlined />
}

function SideMenu(props) {
  const [menu, setMenu] = useState([]);

  const {role:{rights}} = JSON.parse(localStorage.getItem("token"));

  useEffect(() => {
    const params = {
      _embed:'children',
      pagepermisson: 1
    }
    API.rights(params).then(res => {
      setMenu(res.data);
    });
  },[]); //当useEffect第二个参数为空数组时，只调用一次

  const checkPagePermission = (item) => {
    return item.pagepermisson && rights.includes(item.key);
  }

  const renderMenu = (menuList)=>{
    return menuList.map(item=>{
      if(item.children?.length > 0 && checkPagePermission(item)) {
        return <SubMenu key={item.key}  icon={iconList[item.key]}  title={item.title}>
                  { renderMenu(item.children) }
                </SubMenu>
      }

      return checkPagePermission(item) && <Menu.Item key={item.key} icon={iconList[item.key]} onClick={()=>{
        //   console.log(props)
        props.history.push(item.key)
      }}>{item.title}</Menu.Item>
    })
  }
  // console.log(props.location.pathname); //  /home
  const selectKeys = [props.location.pathname];
  const openKeys = ['/' + props.location.pathname.split('/')[1]];

  return (
    <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
      <div style={{display: "flex", height:"100%", "flexDirection": "column"}}>
        <div className="logo" >全球新闻发布管理系统</div>
        <div style={{flex: 1,"overflow": "auto"}}>
          <Menu theme="dark" mode="inline" selectedKeys={selectKeys}  defaultOpenKeys={openKeys}>
            {renderMenu(menu)}
          </Menu>
        </div>
      </div>
    </Sider>
  )
}

// const mapStateToProps = ({CollApsedReducer:{isCollapsed}}) => {
//   return {
//     isCollapsed
//   }
// }

const mapStateToProps = (state) => {
  // console.log(state) //{CollApsedReducer: {…}, LoadingReducer: {…}}
  return {
      isCollapsed: state.CollApsedReducer.isCollapsed
  }
}
export default connect(mapStateToProps)(withRouter(SideMenu));